import React, { Component } from 'react'

class Cpn extends Component {
  render() {
    return (
       <h2>我是Cpn组件</h2>
    );
  }

  componentWillUnmount(){
    console.log('执行了Cpn组件的componentWillUnmount方法');

  }
}

export default class App extends Component {

  // 1、构造函数
  constructor(){
    super()

    this.state = {
      counter: 1,
      isShow: true
    }
    // 方法  类中定义的  看是否有this绑定，是否和实例有联系
    // 函数  单独定义的
    console.log('执行了组件的constructor方法');

  }

  // 2、渲染
  render() {
    console.log('执行了组件的render方法');

    return (
      <div>
        App组件
        <h2>当前计数：{this.state.counter}</h2>
        <button onClick={() => this.increment(-1)}>-</button>
        <button onClick={() => this.increment(+1)}>+</button>
        <hr />
        <button onClick={() => this.switchCpn()}>切换</button>
        {
          this.state.isShow ? <Cpn /> : null
        }

      </div>
    )
  }

  increment(type){
    this.setState({
      counter: this.state.counter + type
    })
  }

  switchCpn(){
    this.setState({
      isShow: !this.state.isShow
    })
  }

  // 3、组件挂载成功
  componentDidMount(){
    console.log('执行了组件的componentDidMount方法');
  }

  // 4、组件更新成功
  componentDidUpdate(){
    console.log('执行了组件的componentDidUpdate方法');
  }

  // 5、组件卸载成功
  componentWillUnmount(){
    console.log('执行了组件的componentWillUnmount方法');
  }
}
